import { computed, defineComponent, ref } from 'vue';
import BreakColumn from './BreakColumn.vue';
import BreakRow from './BreakRow.vue';
import ChildrenSizeCompare from './ChildrenSizeCompare.vue';
import ChildrenStyling from './ChildrenStyling.vue';
import ColGutterHorizontal from './ColGutterHorizontal.vue';
import ColGutterMixed from './ColGutterMixed.vue';
import ColGutterSize from './ColGutterSize.vue';
import ColGutterVertical from './ColGutterVertical.vue';
import ColumnAllBreakpoints from './ColumnAllBreakpoints.vue';
import ColumnEqualWidth from './ColumnEqualWidth.vue';
import ColumnFlexOrder from './ColumnFlexOrder.vue';
import ColumnHorizontalAlignment from './ColumnHorizontalAlignment.vue';
import ColumnMixAndMatch from './ColumnMixAndMatch.vue';
import ColumnNesting from './ColumnNesting.vue';
import ColumnReverse from './ColumnReverse.vue';
import ColumnRowWidth from './ColumnRowWidth.vue';
import ColumnRowWrapping from './ColumnRowWrapping.vue';
import ColumnVariableWidth from './ColumnVariableWidth.vue';
import ColumnVerticalAlignment from './ColumnVerticalAlignment.vue';
import GutterHorizontal from './GutterHorizontal.vue';
import GutterMixed from './GutterMixed.vue';
import GutterSize from './GutterSize.vue';
import GutterVertical from './GutterVertical.vue';
import Masonry from './Masonry.vue';
import MasonryTableGrid from './MasonryTableGrid.vue';
import ParentStyling from './ParentStyling.vue';
import RowAllBreakpoints from './RowAllBreakpoints.vue';
import RowColumnWidth from './RowColumnWidth.vue';
import RowColumnWrapping from './RowColumnWrapping.vue';
import RowEqualWidth from './RowEqualWidth.vue';
import RowFlexOrder from './RowFlexOrder.vue';
import RowHorizontalAlignment from './RowHorizontalAlignment.vue';
import RowMixAndMatch from './RowMixAndMatch.vue';
import RowNesting from './RowNesting.vue';
import RowOffsettingColumns from './RowOffsettingColumns.vue';
import RowReverse from './RowReverse.vue';
import RowStackedToHorizontal from './RowStackedToHorizontal.vue';
import RowVariableWidth from './RowVariableWidth.vue';
import RowVerticalAlignment from './RowVerticalAlignment.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>BreakColumn</h5>
            <BreakColumn />
          </div>
          <div class='block-'>
            <h5 class='title'>BreakRow</h5>
            <BreakRow />
          </div>
          <div class='block-'>
            <h5 class='title'>ChildrenSizeCompare</h5>
            <ChildrenSizeCompare />
          </div>
          <div class='block-'>
            <h5 class='title'>ChildrenStyling</h5>
            <ChildrenStyling />
          </div>
          <div class='block-'>
            <h5 class='title'>ColGutterHorizontal</h5>
            <ColGutterHorizontal />
          </div>
          <div class='block-'>
            <h5 class='title'>ColGutterMixed</h5>
            <ColGutterMixed />
          </div>
          <div class='block-'>
            <h5 class='title'>ColGutterSize</h5>
            <ColGutterSize />
          </div>
          <div class='block-'>
            <h5 class='title'>ColGutterVertical</h5>
            <ColGutterVertical />
          </div>
          <div class='block-'>
            <h5 class='title'>ColumnAllBreakpoints</h5>
            <ColumnAllBreakpoints />
          </div>
          <div class='block-'>
            <h5 class='title'>ColumnEqualWidth</h5>
            <ColumnEqualWidth />
          </div>
          <div class='block-'>
            <h5 class='title'>ColumnFlexOrder</h5>
            <ColumnFlexOrder />
          </div>
          <div class='block-'>
            <h5 class='title'>ColumnHorizontalAlignment</h5>
            <ColumnHorizontalAlignment />
          </div>
          <div class='block-'>
            <h5 class='title'>ColumnMixAndMatch</h5>
            <ColumnMixAndMatch />
          </div>
          <div class='block-'>
            <h5 class='title'>ColumnNesting</h5>
            <ColumnNesting />
          </div>
          <div class='block-'>
            <h5 class='title'>ColumnReverse</h5>
            <ColumnReverse />
          </div>
          <div class='block-'>
            <h5 class='title'>ColumnRowWidth</h5>
            <ColumnRowWidth />
          </div>
          <div class='block-'>
            <h5 class='title'>ColumnRowWrapping</h5>
            <ColumnRowWrapping />
          </div>
          <div class='block-'>
            <h5 class='title'>ColumnVariableWidth</h5>
            <ColumnVariableWidth />
          </div>
          <div class='block-'>
            <h5 class='title'>ColumnVerticalAlignment</h5>
            <ColumnVerticalAlignment />
          </div>
          <div class='block-'>
            <h5 class='title'>GutterHorizontal</h5>
            <GutterHorizontal />
          </div>
          <div class='block-'>
            <h5 class='title'>GutterMixed</h5>
            <GutterMixed />
          </div>
          <div class='block-'>
            <h5 class='title'>GutterSize</h5>
            <GutterSize />
          </div>
          <div class='block-'>
            <h5 class='title'>GutterVertical</h5>
            <GutterVertical />
          </div>
          <div class='block-'>
            <h5 class='title'>Masonry</h5>
            <Masonry />
          </div>
          <div class='block-'>
            <h5 class='title'>MasonryTableGrid</h5>
            <MasonryTableGrid />
          </div>
          <div class='block-'>
            <h5 class='title'>ParentStyling</h5>
            <ParentStyling />
          </div>
          <div class='block-'>
            <h5 class='title'>RowAllBreakpoints</h5>
            <RowAllBreakpoints />
          </div>
          <div class='block-'>
            <h5 class='title'>RowColumnWidth</h5>
            <RowColumnWidth />
          </div>
          <div class='block-'>
            <h5 class='title'>RowColumnWrapping</h5>
            <RowColumnWrapping />
          </div>
          <div class='block-'>
            <h5 class='title'>RowEqualWidth</h5>
            <RowEqualWidth />
          </div>
          <div class='block-'>
            <h5 class='title'>RowFlexOrder</h5>
            <RowFlexOrder />
          </div>
          <div class='block-'>
            <h5 class='title'>RowHorizontalAlignment</h5>
            <RowHorizontalAlignment />
          </div>
          <div class='block-'>
            <h5 class='title'>RowMixAndMatch</h5>
            <RowMixAndMatch />
          </div>
          <div class='block-'>
            <h5 class='title'>RowNesting</h5>
            <RowNesting />
          </div>
          <div class='block-'>
            <h5 class='title'>RowOffsettingColumns</h5>
            <RowOffsettingColumns />
          </div>
          <div class='block-'>
            <h5 class='title'>RowReverse</h5>
            <RowReverse />
          </div>
          <div class='block-'>
            <h5 class='title'>RowStackedToHorizontal</h5>
            <RowStackedToHorizontal />
          </div>
          <div class='block-'>
            <h5 class='title'>RowVariableWidth</h5>
            <RowVariableWidth />
          </div>
          <div class='block-'>
            <h5 class='title'>RowVerticalAlignment</h5>
            <RowVerticalAlignment />
          </div>
        </div>
      );
    };
  },
});
